import React, {Component} from "react";
import './index.css'
import PropTypes from "prop-types";

export class UserFooter extends Component {
    static propTypes = {
        todos: PropTypes.array.isRequired,
        isAll: PropTypes.func.isRequired,
        clearAll: PropTypes.func.isRequired
    }
     state = {
        isShow: true
    }
    doneTotalCount = () => {
        const {todos} = this.props
        return todos.reduce((pre, cur) => {
            return pre + (cur.done ? 1 : 0);
        }, 0)
    };
    changeAll = (e) => {
        this.props.isAll(e.target.checked);
    };
    
    render() {
        const {todos} = this.props
        return (
            <div className="todo-footer" style={{display: todos.length ? "block" : "none"}}>
                <label>
                    <input type="checkbox"
                           checked={this.doneTotalCount() === todos.length && todos.length !== 0}
                           onChange={this.changeAll}
                    />
                </label>
                <span>
                   <span>已完成 {this.doneTotalCount()}</span> / 全部{todos.length}
                </span>
                <button onClick={this.handleClearAll} className="btn btn-danger">清除已完成任务</button>
            </div>
        )
    }
    
    handleClearAll = () => {
        this.props.clearAll()
    }
}